<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>上传留言板背景</span>
      </div>
      <el-upload class="upload-demo" drag :action="`${this.$urlBase}message/messageImg`" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-card>
    <message-list></message-list>
  </div>
</template>
<script>
import MessageList from '@/components/fromt/MessageList.vue'
export default {
  components: { MessageList },
  name: 'FrontMessage'
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-bottom: 40px;
}
</style>
